<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE head PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="/static/include/common.inc"%>
<link rel="stylesheet" href="static/admin/css/layui.css">
<link rel="stylesheet" href="static/admin/css/main.css" media="all">
<link rel="stylesheet" href="static/layui_v2.2.3/css/zbyui.css">
<script src="static/js/jquery-1.11.2.js"></script>
<script src="static/layui_v2.2.3/layui.js"></script>
</head>
<body>
	<form class="layui-form" action="">
		<input type="hidden" name="articleId" value="${article.articleId }" id="articleId">
		<div class="layui-form-item">
			<label class="layui-form-label">文章标题</label>
			<div class="layui-input-block">
				<input type="text" name="articleName" required lay-verify="required" maxlength="64"
					placeholder="请输入标题" autocomplete="off" class="layui-input" value="${article.articleName }">
			</div>
		</div>
		<div class="layui-form-item"
			style="height: 100px; margin-top: 40px;" id="zby-item">
			<label class="layui-form-label">上传logo</label>
			<div class="layui-input-block">
				<input type="file" style="display: none;" id="zby-upload">
				<input type="hidden" name="logoUrl" value="${article.logoUrl }" lay-verify="logoUrl" id="logoUrl">
				<img id="zby-img" alt="" src="${not empty article.logoUrl? article.logoUrl:'static/admin/img/user_edit.png'}" 
					style="height: 90px; width: 100px; border: 2px solid #000;">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">发布时间</label>
			<div class="layui-input-block">
				<input type="text" name="releaseTimeStr" required
					lay-verify="required" placeholder="请输入发布时间" autocomplete="off"
					class="layui-input" id="releaseTimeStr" readonly="readonly" value="${article.releaseTimeStr }">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">阅读次数</label>
			<div class="layui-input-block">
				<input type="text" name="readNum" required lay-verify="number"
					placeholder="请输入阅读次数" autocomplete="off" class="layui-input" value="${not empty article.readNum?article.readNum:0 }">
			</div>
		</div>
		<div class="layui-input-inline layui-form">
			<label class="layui-form-label">类型</label>
			<div class="layui-input-block" style="z-index: 99999;">
				<select name="articleType" lay-verify="required" id="articleType" lay-filter="articleType">
					<option value=""></option>
					<option value="1" ${article.articleType==1?"selected='selected'":"" }>新闻</option>
					<option value="2" ${article.articleType==2?"selected='selected'":"" }>公告</option>
				</select>
			</div>
		</div>
		<div class="layui-input-inline layui-form" id="announcement">
			<label class="layui-form-label">公告类型</label>
			<div class="layui-input-block" style="z-index: 9999;">
				<select name="announcementType" lay-verify="announcementType">
					<option value=""></option>
					<c:forEach items="${announcementTypes }" var="type">
						<option value="${type.code }" ${type.code==article.announcementType?"selected='selected'":"" }>${type.value }</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block" style="z-index: 9999;">
				<select name="articleStatus" lay-verify="required">
					<option value=""></option>
					<c:forEach items="${articleStatuses }" var="type">
						<option value="${type.code }" ${type.code==article.articleStatus?"selected='selected'":"" }>${type.value }</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">内容</label>
			<div class="layui-input-block">
				<input name="content" type="hidden" id="content">
				<!-- 加载编辑器的容器 -->
				<script id="container" type="text/plain">${article.content}</script>
    		</div>
    	</div>
		<div class="layui-form-item">
			<div class="layui-input-block" style="align-items: center;">
				<button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
				<button class="layui-btn layui-btn-primary" id="zby-closeBtn">关闭</button>
			</div>
		</div>
	</form>
	<!-- 配置文件 -->
	<script type="text/javascript" src="static/ueditor1433/ueditor.config.js"></script>
	<!-- 编辑器源码文件 -->
	<script type="text/javascript" src="static/ueditor1433/ueditor.all.js"></script>
	<script type="text/javascript">
		
		var ue = UE.getEditor('container', {
			initialFrameWidth : 870,
			initialFrameHeight : 200,
		});
		layui.use([ 'form', 'laydate' ], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			//执行一个laydate实例
			laydate.render({
				elem : '#releaseTimeStr' //指定元素
			});
			
			form.verify({
				logoUrl:function(value,item){
					if(value==""){
						return "请上传logo图片";
					}
				}
			});
			
			form.on('select(articleType)', function(data){
			    if(data.value==2){
			    	$("#announcement").show();
			    }else{
			    	$("#announcement").hide();
			    }
			})
			//监听提交
			form.on('submit(formDemo)', function(data) {
				data.field.content = ue.getContent();
				$(".layui-btn").addClass("layui-btn-disabled")
				$.ajax({
					type : "post",
					url : "admin/article/updateArticle.do",
					data : data.field,
					async: false,
					success : function(result) {
						if (result.code == 1) {
							parent.layer.msg(result.msg);
							setTimeout(closeOpt,1500);
						} else {
							parent.layer.msg(result.msg);
						}
					}
				});
				return false;
			});
		});
		function closeOpt(){
			var index=parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
			window.parent.location.reload();
		}
		$("#zby-closeBtn").bind("click",function(){
			var index=parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		})
		$("#zby-img").bind("click", function() {
			$("#zby-upload").click();
		})
		var formData;
		$("#zby-upload").bind("change", function() {
			formData = new FormData();
			console.log(this.files[0])
			for(var i=0;i<this.files.length;i++){
				checkImg(this.files[i].name);
				formData.append("files"+i,this.files[i]);
			}
			// 创建 一个FileReader对象
    		var reader = new FileReader();
    		// 读取文件作为URL可访问地址
    		reader.readAsDataURL(this.files[0]);
    		reader.onload=function(e){
				$("#zby-img").attr("src",e.target.result)
				//$("#zby-upload").val(e.target.result)
    		}
    		console.log(formData);
    		//return false;
    		$.ajax({
				type : "post",
				url : "front/image/manyFileUpload.do",
				data : formData,
				async: false,
				processData: false,  // 告诉jQuery不要去处理发送的数据
	            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
				success : function(result) {
					if (result.code == 1) {
						$("#logoUrl").val(result.path)
					} else {
						layer.msg(result.msg,{icon: 5});
					}
				}
			}); 
		})
		
		function checkImg(imgName){
			var index= imgName.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
			img_id=imgName.substring(index); //截断"."之前的，得到后缀
    		if(img_id!=".bmp"&&img_id!=".png"&&img_id!=".gif"&&img_id!=".jpg"&&img_id!=".jpeg"){  //根据后缀，判断是否符合图片格式
          		alert("不是图片格式,重新选择"); 
         		document.getElementById('movie_img').value="";  // 不符合，就清除，重新选择
      		}
 		}
		
		$(function(){
			var articleType = '${article.articleType}';
			if(articleType==2){
				$("#announcement").show();
			}else{
				$("#announcement").hide();
			}
			
		});
	</script>
</body>
</html>